<template>
  <div>
    <home-header ></home-header>
    <home-swiper :swiperList="swiperList"></home-swiper>
    <home-icon :iconList="iconList"></home-icon>
    <home-recommend :recommendList="recommendList"></home-recommend>
    <home-weekend :weekList="weekList"></home-weekend>
  </div>
</template>

<script>
import HomeHeader from "./component/header"
import HomeSwiper from "./component/swiper"
import HomeIcon from "./component/icons"
import HomeRecommend from "./component/recommend"
import HomeWeekend from "./component/weekend"
import axios from 'axios'
import {mapState} from 'vuex'
 export default {
   name:"home",
   data () {
     return {
       swiperList:[],
       iconList:[],
       recommendList:[],
       weekList:[],
       lastCity:""
     }
   },
   computed:{
     ...mapState({
       city:'city'
     })
   },
   mounted(){
     this.lastCity=this.city
     this.getHomeInfo()
   },
   activated(){
     if(this.lastCity!==this.city){
       this.lastCity=this.city
       this.getHomeInfo()
     }
   },
   methods:{
     getHomeInfo(){
       axios.get("/api/home.json?city="+this.city)
       .then(this.getHomeInfoSucc)
     },
     getHomeInfoSucc(res){
       res=res.data
       if(res.ret&&res.data){
         const data=res.data
         this.swiperList=data.swiperList
         this.iconList=data.iconList
         this.recommendList=data.recommendList
         this.weekList=data.weekendList
       }
    
     }
   },
   components: {
     HomeHeader,
     HomeSwiper,
     HomeIcon,
     HomeRecommend,
     HomeWeekend
   }
 }
</script>

<style>

 
</style>
